<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>three.js</h1>
</body>
<script type="importmap">
    {
      "imports": {
        "three": "./node_modules/three/build/three.module.js",
        "three/addons/": "./node_modules/three/examples/jsm/"
      }
    }
  </script>
<script type="module">
    import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 创建场景
const scene = new THREE.Scene();

// 创建相机: 透视相机
// new THREE.PerspectiveCamera( 视野角度,宽度 / 高度, 近截面, 远截面 );
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 2000 );
// 设置相机的位置
camera.position.set(200,200,200);
// 设置相机的观察位置
camera.lookAt(0,0,0);


// 创建立方体: 长宽高
const geometry = new THREE.BoxGeometry( 200, 200, 200 );
// 创建网格基础材料:
//  MeshBasicMaterial基础网格材质, 不受光照影响
//  MeshLambertMaterial: 漫反射网格材料, 会受到光照影响
const material = new THREE.MeshLambertMaterial( { color: 0x0000ff,transparent:false,opacity:0.5 } );

// 根据立方体模型和网格材料创建立方体网格: 将材料覆盖在立方体上
const cube = new THREE.Mesh( geometry, material );
// 设置立方体的位置
cube.position.set(0,0,0);
// 将立方体添加到场景中
scene.add( cube );

// 创建三维坐标轴
const axesHelper=new THREE.AxesHelper(300);
// 将三维坐标轴添加到场景中
scene.add(axesHelper);



// 创建点光源
const pointLight=new THREE.PointLight(0xffffff,1);
// 设置光源位置
pointLight.position.set( 200, 200, 200 );
// 将光源添加到场景中
scene.add(pointLight);


// 创建渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染尺寸: 设置canvas画布的宽高
renderer.setSize( window.innerWidth, window.innerHeight );
// 执行一个渲染操作
renderer.render(scene,camera);

// 创建轨道控制器
const controls = new OrbitControls( camera, renderer.domElement );

controls.addEventListener('change',function(event){
    console.log(event);
    // 执行一个渲染操作
renderer.render(scene,camera);
});

// 将渲染结果挂载到dom页面上
document.body.appendChild( renderer.domElement );

</script>

</html>